<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>李老师课程表</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      td {
        border: 1px solid #cccccc;
        height: 3em;
        /* width: 4em; */
        font-size: 1em;
        text-align: center;
      }

      .container {
        display: flex;
      }

      .red {
        background: #d9534f;
        color: #fff;
      }

      .purple {
        background: #337ab7;
        color: #fff;
      }

      .green {
        background: #5cb85c;
        color: #fff;
      }

      .black {
        background: #000;
        color: #fff;
      }
      .yellow {
        background: #e6a23c;
        color: #fff;
      }
      .pop {
        position: fixed;
        width: 100%;
        height: 100%;
        animation: bounce 4s forwards;
        /* display: none; */
      }

      /* .shadow {
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4);
            left: 0;
            top: 0;
        } */

      .content {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        left: 0;
        top: 0;
      }

      @keyframes bounce {
        0% {
          transform: translate(-99em);
        }

        10% {
          transform: translate(0em);
        }

        60% {
          transform: translate(0em);
        }

        100% {
          transform: translate(-30em);
        }
      }

      .content img {
        width: 100%;
        height: auto;
      }
    </style>
  </head>

  <body>
    <div class="pop">
      <div class="shadow"></div>
      <div class="content">
        <img src="" alt="" />
      </div>
    </div>
    <div class="container">
      <table cellspacing="0">
        <thead>
          <tr>
            <td>刷脸时间</td>
            <td class="mon monB">Mon</td>
            <td class="tue tueB">Tue</td>
            <td class="wed wedB">Wed</td>
            <td class="thu thuB">Thu</td>
            <td class="fri friB">Fri</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>早6:30-8:30</td>
            <td class="mon purple">九一语文</td>
            <td class="tue"></td>
            <td class="wed purple">九一语文</td>
            <td class="thu"></td>
            <td class="purple fri">九一语文</td>
          </tr>
          <tr>
            <td rowspan="4">上午12:00-2:20</td>
            <td class="mon"></td>
            <td class="tue"></td>
            <td class="wed"></td>
            <td class="thu"></td>
            <td class="fri"></td>
          </tr>
          <tr>
            <td class="purple mon">九一语文</td>
            <td class="tue"></td>
            <td class="wed"></td>
            <td class="thu"></td>
            <td class="purple fri">九一语文</td>
          </tr>
          <tr>
            <td class="mon"></td>
            <td class="tue"></td>
            <td class="wed purple">九一语文</td>
            <td class="thu"></td>
            <td class="fri"></td>
          </tr>
          <tr>
            <td class="mon "></td>
            <td class="tue"></td>
            <td class="wed yellow">七一地理</td>
            <td class="thu"></td>
            <td class="fri yellow">七一地理</td>
          </tr>
          <tr>
            <td rowspan="4">下午4:30-8:00</td>
            <td class="mon"></td>
            <td class="tue"></td>
            <td class="wed purple">九一语文</td>
            <td class="purple purple">作文</td>
            <td class="fri"></td>
          </tr>
          <tr>
            <td class="mon yellow">七一地理</td>
            <td class="tue"></td>
            <td class="wed"></td>
            <td class="purple purple">作文</td>
            <td class="fri"></td>
          </tr>
          <tr>
            <td class="mon"></td>
            <td class="tue"></td>
            <td class="wed"></td>
            <td class="thu"></td>
            <td class="fri"></td>
          </tr>
          <!-- <tr>
            <td colspan="5" style="text-align: center">开心一下😜</td>
          </tr> -->
          <tr>
            <td class="mon"></td>
            <td class="tue"></td>
            <td class="wed"></td>
            <td class="thu red">书法</td>
            <td class="fri"></td>
          </tr>
          <tr>
            <td rowspan="3">晚上(18:10进班)</td>
            <td class="mon"></td>
            <td class="tue"></td>
            <td class="wed"></td>
            <td class="thu"></td>
            <td class="fri"></td>
          </tr>
          <tr>
            <td class="mon"></td>
            <td class="tue"></td>
            <td class="wed purple">九一语文</td>
            <td class="thu"></td>
            <td class="fri"></td>
          </tr>
          <tr>
            <td class="mon"></td>
            <td class="tue"></td>
            <td class="wed"></td>
            <td class="thu"></td>
            <td class="fri"></td>
          </tr>
        </tbody>
      </table>
      <table cellspacing="0" class="second">
        <thead>
          <tr>
            <td colspan="2">夏令时</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>早：</td>
            <td>5:30-7:00</td>
          </tr>
          <tr>
            <td rowspan="4">上午</td>
            <td>8:10-8:55</td>
          </tr>
          <tr>
            <td>9:05-9:50</td>
          </tr>
          <tr>
            <td>10:20-11:05</td>
          </tr>
          <tr>
            <td>11:15-12:00</td>
          </tr>

          <tr>
            <td rowspan="4">下午</td>
            <td>14:00-14:45</td>
          </tr>
          <tr>
            <td>14:55-15:40</td>
          </tr>
          <tr>
            <td>15:50-16:35</td>
          </tr>
          <tr>
            <td>16:45-17:30</td>
          </tr>
          <tr>
            <td rowspan="3">晚上</td>
            <td>18:40-19:25</td>
          </tr>
          <tr>
            <td>19:35-20:20</td>
          </tr>
          <tr>
            <td>20:30-21:00</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      //获取当前时间高亮显示
      var str = ''
      var imageSrc = [
        'WechatIMG185.jpeg',
        'WechatIMG186.jpeg',
        'WechatIMG185.jpeg',
        'WechatIMG186.jpeg',
        'WechatIMG185.jpeg',
        'WechatIMG186.jpeg'
      ]
      var week = new Date().getDay()
      $('.content img').attr('src', imageSrc[week])
      if (week == 0) {
      } else if (week == 1) {
        str = '今天是星期一'
        $('.mon').css({
          border: '1px solid pink'
        })
        $('.monB').css({
          background: 'pink'
        })
      } else if (week == 2) {
        str = '今天是星期二'
        $('.tue').css({
          border: '1px solid pink'
        })
        $('.tueB').css({
          background: 'pink'
        })
      } else if (week == 3) {
        str = '今天是星期三'
        $('.wed').css({
          border: '1px solid pink'
        })
        $('.wedB').css({
          background: 'pink'
        })
      } else if (week == 4) {
        $('.thu').css({
          border: '1px solid pink'
        })
        $('.thuB').css({
          background: 'pink'
        })
        str = '今天是星期四'
      } else if (week == 5) {
        str = '今天是星期五'
        $('.fri').css({
          border: '1px solid pink'
        })
        $('.friB').css({
          background: 'pink'
        })
      } else if (week == 6) {
        str = '今天是星期六'
      }

      $('.pop').click(function() {
        $('.pop').hide()
      })
    </script>
  </body>
</html>
